<!--
  全局加载动画
-->
<template>
  <div class="loader">
    <div class="loader-inner line-scale-pulse-out-rapid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
@size: 60px;

@keyframes line-scale-pulse-out-rapid {
  0% {
    transform: scaley(1);
  }
  80% {
    transform: scaley(0.3);
  }
  90% {
    transform: scaley(1);
  }
}

.line-scale-pulse-out-rapid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-@size / 2);
  > div {
    background-color: @theme-bac-color-5;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    animation-fill-mode: both;
    display: inline-block;
    animation: line-scale-pulse-out-rapid 0.9s 0s infinite
      cubic-bezier(0.11, 0.49, 0.38, 0.78);

    &:nth-child(2),
    &:nth-child(4) {
      animation-delay: 0.15s !important;
    }

    &:nth-child(1),
    &:nth-child(5) {
      animation-delay: 0.25s !important;
    }
  }
}
</style>
